import { unitOptions, sizeOptions, textAlignOptions, borderStyleOptions, buttonTypeOptions } from "../../../lib/const"

const getStyleFormJson = (type, beforeUpload) => {
  // 通用几何属性
  const geometric = [
    {
      type: "number",
      label: "x坐标",
      fieldName: "left",
      initialValue: "",
      extraConfig: {
        className: "value",
      }
    },
    {
      type: "select",
      label: "单位",
      fieldName: "leftUnit",
      initialValue: "",
      options: unitOptions,
      extraConfig: {
        className: "unit",
      }
    },
    {
      type: "number",
      label: "y坐标",
      fieldName: "top",
      initialValue: "",
      extraConfig: {
        className: "value",
      }
    },
    {
      type: "select",
      label: "单位",
      fieldName: "topUnit",
      initialValue: "",
      options: unitOptions,
      extraConfig: {
        className: "unit",
      }
    },
    {
      type: "number",
      label: "宽度",
      fieldName: "width",
      initialValue: "",
      extraConfig: {
        className: "value",
      }
    },
    {
      type: "select",
      label: "单位",
      fieldName: "widthUnit",
      initialValue: "",
      options: unitOptions,
      extraConfig: {
        className: "unit",
      }
    },
    {
      type: "number",
      label: "高度",
      fieldName: "height",
      initialValue: "",
      extraConfig: {
        className: "value",
      }
    },
    {
      type: "select",
      label: "单位",
      fieldName: "heightUnit",
      initialValue: "",
      options: unitOptions,
      extraConfig: {
        className: "unit",
      }
    },
    // {
    //   type: "number",
    //   label: "透明度",
    //   fieldName: "opacity",
    //   initialValue: "",
    //   extraConfig: {
    //     className: "row",
    //   }
    // },
  ]
  // 通用透明度属性
  const opacity = [
    {
      type: "number",
      label: "透明度",
      fieldName: "opacity",
      initialValue: 1,
      extraConfig: {
        className: "value",
      }
    },
  ]
  // 通用文字属性
  const font = [
    {
      type: "number",
      label: "字号",
      fieldName: "fontSize",
      initialValue: "",
      extraConfig: {
        className: "row",
      }
    },
    {
      type: "number",
      label: "字重",
      fieldName: "fontWeight",
      initialValue: "",
      extraConfig: {
        className: "row",
      }
    },
    {
      type: "number",
      label: "行高",
      fieldName: "lineHeight",
      initialValue: "",
      extraConfig: {
        className: "row",
      }
    },
    // {
    //   type: "select",
    //   label: "单位",
    //   fieldName: "lineHeightUnit",
    //   initialValue: "",
    //   options: unitOptions,
    //   extraConfig: {
    //     disabled: true,
    //     className: "unit",
    //   }
    // },
    {
      type: "select",
      label: "对齐方式",
      fieldName: "textAlign",
      initialValue: "left",
      options: textAlignOptions,
      extraConfig: {
        className: "value",
      }
    },
    {
      type: "color",
      label: "文字颜色",
      fieldName: "color",
      initialValue: "",
      extraConfig: {
        className: "value",
      }
    },

  ]
  // 通用边框属性
  const border = [
    {
      type: "number",
      label: "边框宽度",
      fieldName: "borderWidth",
      initialValue: "",
      extraConfig: {
        className: "value",
      }
    },
    {
      type: "select",
      label: "单位",
      fieldName: "borderWidthUnit",
      initialValue: "px",
      extraConfig: {
        disabled: true,
        className: "unit",
      }
    },
    {
      type: "select",
      label: "边框类型",
      fieldName: "borderStyle",
      options: borderStyleOptions,
      initialValue: "solid",
      extraConfig: {
        className: "value",
      }
    },
    {
      type: "color",
      label: "边框颜色",
      fieldName: "borderColor",
      initialValue: "",
      extraConfig: {
        className: "value",
      }
    },
  ]
  // 通用圆角属性
  const borderRadius = [
    {
      type: "number",
      label: "圆角",
      fieldName: "borderRadius",
      initialValue: 0,
      extraConfig: {
        className: "value",
      }
    },
    {
      type: "select",
      label: "单位",
      fieldName: "borderRadiusUnit",
      initialValue: "px",
      options: unitOptions,
      extraConfig: {
        className: "unit",
        disabled: true
      }
    },
  ]
  // 通用方块属性
  const background = [
    {
      // type: "color",
      type: "gradient-color",
      label: "背景色",
      fieldName: "backgroundColor",
      initialValue: {color: ['#ffffff']},
      extraConfig: {
        className: "row",
      }
    },
    // {
    //   type: "color",
    //   label: "背景颜色",
    //   fieldName: "backgroundColor",
    //   initialValue: "",
    //   extraConfig: {
    //     className: "value",
    //   }
    // },
    {
      type: "upload",
      label: "背景图片",
      fieldName: "backgroundImage",
      initialValue: "",
      beforeUpload,
      extraConfig: {
        className: "value",
        showUploadList: false
      }
    },

  ]
  // 通用按钮属性
  const button = [
    // 大小没意思
    // {
    //   type: "select",
    //   label: "大小",
    //   fieldName: "size",
    //   initialValue: "small",
    //   options: sizeOptions,
    //   extraConfig: {
    //     className: "unit"
    //   }
    // },
    {
      type: "select",
      label: "类型",
      fieldName: "type",
      initialValue: "default",
      options: buttonTypeOptions,
      extraConfig: {
        className: "row"
      }
    },
  ]
  switch (type){
    case "text":
      return [...font, ...opacity]
    case "box":
      return [...background, ...border, ...borderRadius,...opacity]
    case "button":
      return [...button, ...opacity]
    case "geometric":
      return [...geometric]
    case "web":
      return [...background, ...border, ...borderRadius,...opacity]
    case "tabs":
      return [...background, ...opacity]
    default:
      return [...opacity]
  }
}
export default getStyleFormJson
